@import '@/styles/color';
@import '@/styles/token';

.files-container {
  width: 100%;
  gap: @margin;
  padding: @paddingXs 0;
  border-bottom: @lineWidth solid @colorBorder;

  .file-box {
    width: 200px;
    padding: @paddingXs;
    background-color: @colorFillTertiary;
    height: 62px;
    border-radius: @borderRadius;
    font-size: @fontSize;
    color: @colorText;
    position: relative;

    &.image-box {
      height: unset;
      width: unset;
      padding: 0;
    }

    &:hover {
      .del {
        visibility: visible;
      }
    }

    .del {
      position: absolute;
      top: -6px;
      right: -6px;
      font-size: @fontSize;
      color: @colorTextSecondary;
      visibility: hidden;
      transition: visibility 0.3s, background-color 0.3s;
      cursor: pointer;
      border-radius: 50%;
      background-color: @colorWhite;

      &:hover {
        color: @colorText;
      }
    }

    img {
      width: 50px;
      margin-right: @marginXxs;
      border-radius: @borderRadiusSm;
    }

    .info {
      margin-left: @marginXs;
      padding-right: @paddingSm;
      width: 100%;
    }

    .size {
      color: @colorTextSecondary;
      font-size: @fontSizeSm;
    }

    // .progress-upload-file {
    //   position: absolute;
    //   right: 6px;
    //   top: 50%;
    //   transform: translateY(-50%);

    //   :global {
    //     .ant-progress-text {
    //       font-size: 9px;
    //     }
    //   }
    // }

    // 图片容器和图标容器
    .icon-container {
      position: relative;
      margin-right: @marginXs;
    }

    // 状态指示器
    .status-icon {
      position: absolute;
      top: 50%;
      right: 50%;
      transform: translate(50%, -50%);
      font-size: @fontSize;
      border-radius: 50%;
      background-color: @colorWhite;
      width: 16px;
      height: 16px;
      padding: @paddingXxs;
      box-sizing: content-box;
      z-index: 1;
    }

    .status-success {
      color: @colorSuccess;
    }

    .status-error {
      color: @colorError;
    }

    .status-loading {
      color: @colorPrimary;
      padding: 0 @paddingXxs @paddingXs @paddingXxs;
    }

    // 图片文件特殊样式
    .file-image {
      width: 62px;
      height: 62px;
      border-radius: @borderRadiusSm;
      margin: 0;
      object-fit: cover;
    }
  }
}

// 加载动画
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 720px) {
  .files-container {
    // 不换行，超出滚动
    display: grid;
  }
}

@media screen and (min-width: 721px) {
  .files-container {
    // 不换行，超出滚动
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
}
